<script lang="ts">
  import { onMount } from "svelte";
  import image from "./image";
  import { Sakura, SakuraList } from "./lib/Sakura";
  import { getRandom } from "./tool";
  import Image from "./lib/Image.svelte";

  let canvas: HTMLCanvasElement;
  let context: CanvasRenderingContext2D;
  let animationId: number;
  let sakuraList: SakuraList;

  function createSakuraCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    context = canvas.getContext("2d")!;
    sakuraList = new SakuraList();

    for (let i = 0; i < 60; i++) {
      sakuraList.push(
        new Sakura(
          getRandom("x"),
          getRandom("y"),
          getRandom("s"),
          getRandom("r"),
          {
            x: getRandom("fnx"),
            y: getRandom("fny"),
            r: getRandom("fnr"),
          }
        )
      );
    }

    animate();
  }

  function animate() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    sakuraList.update();
    sakuraList.draw(context, image);
    animationId = requestAnimationFrame(animate);
  }

  function cleanup() {
    cancelAnimationFrame(animationId);
  }

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  const baseUrl = "jing/";

  let img1 = $state<HTMLImageElement>();
  let img2 = $state<HTMLImageElement>();
  let angle = $state(0);

  let index = $state(1);
  let frontImage = $state(1);
  let backImage = $state(2);
  let disable = $state(false);
  let isPlay = false;
  const music = new Audio("miss.mp3");
  
  music.loop = true; // 循环
  music.autoplay = false; // 不自动播
  music.volume = 1; // 音量
  
  let i = 0;
  function flipForward() {
    angle += 180;
  }
  
  function onclick() {
    if (!isPlay) {
      isPlay = true;
      music.play();
    }
    flipForward();
    disable = true;
    setTimeout(() => {
      if (i % 2 === 0) {
        frontImage = (frontImage + 2) % 8 + 1;
      } else {
        backImage = (backImage + 2) % 8 + 1;
        
      }
      disable = false;
      i++;
    }, 500);
  }
  onMount(() => {
    createSakuraCanvas();
    window.addEventListener("resize", resizeCanvas);
  });
</script>

<div class="w-full h-full bg-[url(sakura.jpg)] wrapper">
  <Image
  {angle}
  frontImage={`${baseUrl}${frontImage}.jpg`}
  backImage={`${baseUrl}${backImage}.jpg`}
  />
  <button class="mybutton" {onclick} disabled={disable}> 想晶晶 </button>
  <canvas id="canvas_sakura" bind:this={canvas}> </canvas>
</div>

<style lang="scss">
  #canvas_sakura {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    pointer-events: none;
    // z-index: -1;
  }
  .wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url("/sakura.png");
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    
  }
@media screen and (max-width: 600px) {
  .wrapper {
    background-image: url("/sakura-iphon.jpg");
  }
}
  .mybutton {
    // margin: auto;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    display: inline-block;
    border-radius: 50px;
    background: #f19eca;
    width: 180px;
    height: 70px;
    position: relative;
    color: #6393ca;
    font-size: 24px;
    letter-spacing: 0.094em;
    cursor: pointer;
    box-shadow: 10px 10px 14px 1px rgba(00, 00, 00, 0.2);
    text-align: center;
    transition: all 0.5s;
    text-transform: uppercase;
    // margin: 0 auto 30px;
    opacity: 0.8;
  }
  .mybutton:hover {
    box-shadow: none;
  }
  .image-wrapper {
    position: relative;
    width: 300px;
    height: 400px;
    border: #69739d 1px solid;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 10px 10px 14px 1px rgba(00, 00, 00, 0.2);
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 2s;
    z-index: 10;
    &:hover {
      cursor: pointer;
      :global(.image1) {
        transform: rotateY(-180deg);
      }
      :global(.image2) {
        transform: rotateY(0deg); // 这里应该是让反面转正
      }
    }
  }

  .image {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backface-visibility: hidden;
    z-index: 10;
  }
  .image1 {
    transform: rotateY(180deg);
  }
  .image2 {
    transform: rotateY(0deg);
  }
</style>
